<template>
  <div>
      {{bookname}}
      {{pureBook}}
      {{username}}
      {{nickname}}
      <CompositionComponent></CompositionComponent>
      <TodoList></TodoList>
  </div>
</template>

<script>
import CompositionComponent from './components/CompositionComponent.vue'
import TodoList from './components/TodoList.vue'
export default {
  data(){
    return {
        bookname:"《十天精通vue》",
        username:"蔡徐坤"
    }
  },
  methods:{
    changeBookName(){
      this.bookname="《十天精通vue优点》"
    },
    changeName(name){
      this.username=name;
    }
  },
  computed:{
    pureBook(){
      return this.bookname.substring(1).substring(0,7)
    },
    nickname(){
      return this.username.substring(0,1)+"xx"
    }
  },
  components:{
    CompositionComponent,
    TodoList
},
  setup () {    
    return {}
  }
}
</script>

<style lang="scss" scoped>

</style>